<template>
  <div class="dashboard-container">
    <!-- <sidebar class="sidebar-container" /> -->
    <NavMenu class="sidebar-container" />
    <div class="box-line">
      <div v-for="(item, index) in line1" :key="index" class="box">
        <th>{{ item.title }}</th>
        <div class="line" />
        <td v-for="(i, n) in item.text" :key="n">
          <router-link :to="i.link">{{ i.title }}</router-link>
        </td>
      </div>
    </div>
    <div class="box-line">
      <div v-for="(item, index) in line3" :key="index" class="box">
        <th>{{ item.title }}</th>
        <div class="line" />
        <td v-for="(i, n) in item.text" :key="n">
          <router-link :to="i.link">{{ i.title }}</router-link>
        </td>
      </div>
    </div>
    <div class="box-line">
      <div v-for="(item, index) in line2" :key="index" class="box">
        <th>{{ item.title }}</th>
        <div class="line" />
        <td v-for="(i, n) in item.text" :key="n">
          <router-link :to="i.link">{{ i.title }}</router-link>
        </td>
      </div>
    </div>

    <div class="box-line">
      <div v-for="(item, index) in line4" :key="index" class="box">
        <th>{{ item.title }}</th>
        <div class="line" />
        <td v-for="(i, n) in item.text" :key="n">
          <router-link :to="i.link">{{ i.title }}</router-link>
        </td>
      </div>
    </div>

    <div class="box-line">
      <div v-for="(item, index) in line5" :key="index" class="box">
        <th>{{ item.title }}</th>
        <div class="line" />
        <td v-for="(i, n) in item.text" :key="n">
          <router-link :to="i.link">{{ i.title }}</router-link>
        </td>
      </div>
    </div>
    <!-- <<<<<<< Updated upstream

=======
    <div class="box-line">
      <div v-for="(item, index) in line6" :key="index" class="box">
        <th>{{ item.title }}</th>
        <div class="line" />
        <td v-for="(i, n) in item.text" :key="n">
          <router-link :to="i.link">{{ i.title }}</router-link>
        </td>
      </div>
    </div>
>>>>>>> Stashed changes -->
  </div>
</template>

<script>
// import { Sidebar } from '@/layout/components/index'
import NavMenu from '@/components/NavMenu.vue'

export default {
  name: 'Dashboard',
  components: {
    NavMenu
  },
  // computed: {
  //   ...mapGetters(["name"]),
  // },
  data() {
    return {
      line1: [
        {
          title: '向上对账',
          text: [
            { title: '网点账单', link: '/NetworkBilling' },
            { title: '网点账单明细', link: '/InvoiceBill' },
            { title: '网点账单确认', link: '/InvoiceQuery' }

            // "出港结算关系配置", "出港结算参数维护",'出港拉均配置','科目配置','出港自动导出配置'

          ]
        }
      ],
      line2: [
        {
          title: '有偿结算报表',
          text: [
            { title: '有偿件量统计', link: '/Statistics' },
            { title: '有偿流量流向报表', link: '/PaidTraffic' },
            { title: '有偿结算明细查询', link: '/PaidSettlement' },
            { title: '派费综合报表', link: '/Comprehensive' },
            { title: '特价业务报表', link: '/SpecialSales' },
            { title: '新业务员报表', link: '/NewAgent' },
            { title: '航海政策结算报表', link: '/NauticalPolicy' },
            { title: '派费考核报表', link: '/Payment' },
            { title: '共配业务结算报表', link: '/CoDistribution' },
            { title: '平台账单报表', link: '/PlatformBilling' }
          ]
          // text: [
          //   "出港发件费结算",
          //   "包仓费其他费用结算",
          //   "客户账单管理",
          //   "网点揽收分润账单",
          //   "出港报价中心",
          //   "面单费报价",
          //   "面单费补收",
          //   "代业务员对客户结算",
          // ],
        }
      ],
      line3: [
        {
          title: '资金管理',
          text: [
            { title: '结算账户余额查询', link: '/Settlement1' },
            { title: '结算账户交易明细', link: '/Transaction' }
          ]
        }
      ],
      line4: [
        {
          title: '中转结算报表',
          text: [
            { title: '中转费报表', link: '/TransitCharge' },
            { title: '中转运单明细查询', link: '/TransferWaybill' },
            { title: '包干结算报表', link: '/ResponsibleFor' },
            { title: '中转考核结算报表', link: '/TransferAssessment' },
            { title: '新出港操作费报表', link: '/NewOutbound' },
            { title: '集包费报表', link: '/PackageCharge' },
            { title: '操作装卸费报表', link: '/HandlingCharge' },
            { title: '中转计泡报表', link: '/TransferBubble' },
            { title: '中转差重报表', link: '/TransferDifference' },
            { title: '进港操作费报表', link: '/PortHandling' },
            { title: '退件操作费报表', link: '/ReturnOperating' },
            { title: '退件中转费报表', link: '/ReturnTransfer' },
            { title: '异形件结算报表', link: '/HeterosexualParts' },
            { title: '其他费用报表', link: '/OtherExpense' }
          ]
        }
      ],
      line5: [
        {
          title: '政策结算报表',
          text: [
            { title: '新面单返利报表', link: '/HumanEffect1' }
          ]
        }
      ]
      // line6: [
      //   {
      //     title: '数据对比',
      //     text: [
      //       { title: '重量差异报表', link: '/weight' },
      //       { title: '包重差异报表', link: '/packageWeight' }
      //     ]
      //     // text: ["重量差异报表", "包重差异报表"],
      //   },
      //   {
      //     title: '对账中心',
      //     text: [
      //       { title: '承/业对账中心', link: '/ReconciliationCenter' }
      //     ]
      //     // text: ["承/业对账中心"],
      //   }
      // ]
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-left: 210px;

}

.box {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-flow: column;
  margin: 30px 0px 40px 40px;
  th{
    font-size: 20pt;
    font-weight: normal;
  }
  td {
    margin: 10px 0 10px 0;
    color: #ccc;
    font-size: 18px;
  }
}

.line {
  height: 1px;
  color: #9999;
  background: #9999;
  width: 216px;
  margin: 10px 0px 10px 0;
  margin-left: 20px;
}
</style>
